<template>
    <el-dialog v-model="visible" :title="title" :top="top" :width="width" @close="handleClose" @opened="opened" destroy-on-close append-to-body :close-on-click-modal="false"
        :show-close="showTopClose">
        <div class="phq-dialog-body" :style="`height:${height>0?height+'px':'auto'};max-height:${bodySize.height - 150}px;`">
            <slot></slot>
        </div>
        <template #footer>
            <span class="dialog-footer">
                <slot name="footer">
                    <el-button v-if="showClose" @click="handleClose" size="mini">{{closeText}}</el-button>
                    <el-button type="primary" v-if="showOk" @click="handleOk" size="mini">{{okText}}</el-button>
                </slot>

            </span>
        </template>
    </el-dialog>
</template>

<script lang="ts">
import { computed, defineComponent, nextTick, onMounted, ref, watch, toRefs } from "vue";
import { useStore } from "vuex";

export default defineComponent({
    name: "PElDialog",
    emits: ["update:modelValue", "confirm", "opened", "close"],
    props: {
        modelValue: Boolean,
        width: {
            type: String,
            default: "40%",
        },
        height: Number,
        autoClose: {
            type: Boolean,
            default: false,
        },
        title: String,
        top: {
            type: String,
            default: "auto",
        },
        showClose: {
            type: Boolean,
            default: true,
        },
        showTopClose: {
            type: Boolean,
            default: true,
        },
        showOk: {
            type: Boolean,
            default: true,
        },
        okText: {
            type: String,
            default: "确 定",
        },
        closeText: {
            type: String,
            default: "取 消",
        },
    },
    setup(props, ctx) {
        const { emit } = ctx;
        const store = useStore();
        const { UIAuth, bodySize } = toRefs(store.state);
        /**
         * 是否显示对话框
         */
        const visible = ref<boolean>(false);
        const setVisible = (val: boolean) => {
            nextTick(() => {
                visible.value = val;
            });
        };
        watch(() => props.modelValue, (val: boolean) => {
            setVisible(val);
        });

        onMounted(() => {
            setVisible(props.modelValue);
        });
        const opened = () => {
            emit("opened");
        };
        const handleClose = () => {
            emit("close");
            emit("update:modelValue", false);
        };
        const handleOk = (): void => {
            emit("confirm");
            if (props.autoClose) {
                handleClose();
            }
        };
        return {
            UIAuth,
            bodySize,
            visible,
            opened,
            handleClose,
            handleOk
        };
    },
});
</script>

<style scoped lang="scss">
.phq-dialog-body {
    overflow-x: hidden;
    overflow-y: auto;
    padding: 10px;
}
</style>